<template>
	<view class="mesageconbox">
		<view class="title-topcon" :style="{paddingTop: systemBarHeight + 'px'}">
			消息
		</view>
		<view class="xujia" :style="{paddingTop: systemBarHeight + 'px'}"></view>
		<view class="selectclick">
			<view class="selectbox">
				<view class="selectbox-that" @click="gotoaddfs">
					<div v-if="newaddfs" class="tixin"></div>
					<view class="selecticon">
						<!-- 	<img :src="tianjiahaoyou"/> -->
						<image class="imgcon" :src="tianjiahaoyou"></image>
					</view>
					<view class="selecttext">新增粉丝</view>
				</view>
				<view class="selectbox-that">
					<view class="selecticon">
						<!-- 			<img :src="shouc"/> -->
						<image class="imgcon" :src="shouc"></image>
					</view>
					<view class="selecttext">赞和收藏</view>
				</view>
				<view class="selectbox-that">
					<view class="selecticon">
						<!-- <img :src="pinlin"/> -->
						<image class="imgcon" :src="pinlin"></image>
					</view>
					<view class="selecttext">评论</view>
				</view>
			</view>
		</view>
		<view style="overflow: auto;">
			<view class="messagecon" v-for="(item,index) in chatList" @click.stop="gochat(item)"
				@longpress="delchat(index)" :style="{ backgroundColor: item.showTooltip ? '#ededed' : '#FFF' }">
				<view class="avatarcon">
					<image :src="item.receiver_avatarBase" mode="aspectFill"></image>
					<view class="angle" v-if="item.islook!=='yse'&&item.islook!=='NaN'">{{item.islook}}</view>
				</view>
				<view class="messinfo">
					<view class="name">{{item.username}}</view>
					<view class="endmessge">{{item.endmessge}}</view>
				</view>
				<!-- 悬浮删除弹窗 -->
				<view class="tooltip" :style="{ display: item.showTooltip ? 'block' : 'none' }"
					@click.stop="delchatmess(item)">
					删除
				</view>
			</view>
			<view style="height: 70px;"></view>
		</view>
	</view>
</template>

<script>
	import Sqlite from '@/utils/sqlex.js'
	import url from "@/config/index.js"
	export default {
		data() {
			return {
				nowChageDom: 'kong',
				newaddfs: false, 
				tianjiahaoyou: require('@/static/tianjiahaoyou.png'),
				shouc: require('@/static/shouc.png'),
				pinlin: require('@/static/pinlin.png'),
				id: uni.getStorageSync('id'),
				systemBarHeight: 0,
				chatList: ''
			};
		},
		onShow() {
			// this.$store.commit("setmessagenum",0)
			// uni.removeTabBarBadge({
			//     index: 1 // 这里的index要和之前设置角标时的索引保持一致，用于指定要移除角标的tabBar
			// });
			this.chatList = this.$store.state.chatList.map(item => ({
				...item,
				showTooltip: false // 新增属性，用于跟踪tooltip的显示状态
			}))
			this.getSysteminfo();
			if (this.$store.state.followwarn == "followwarnyou") {
				this.newaddfs = true
			}
		},
		computed: {
			followWarn() {
				return this.$store.state.followwarn;
			},
			charlist(){
				return this.$store.state.chatList
			}
		},
		watch: {
			followWarn(newVal) {
				if (newVal == "followwarnyou") {
					this.newaddfs = true
				}
			},
			// 监控数据列表是否发生改变
			charlist: {
			            handler(newValue, oldValue) {
							this.chatList = newValue.map(item => ({
								...item,
								showTooltip: false // 新增属性，用于跟踪tooltip的显示状态
							}))
			            },
			            deep: true
			        }
		},
		methods: {
			// 点击删除聊天信息
			async  delchatmess(item) {
			    let sqlname = `sqlchat_${this.$store.state.id}`;
			    
			    try {
			        // 等待所有删除操作完成
			        await Promise.all([
						 // Sqlite.ceshi(),
						 //  Sqlite.ceshi2()
			            Sqlite.delTable(sqlname, item.sqlname),
			            Sqlite.delchatid(sqlname, item.receiver_id) // 调用改造后的 delchatid 函数
			        ]);
			
			       
			
			        // 如果 getAllData 是一个异步函数，请使用 await
			        await Sqlite.getAllData(sqlname);
			        this.chatList = this.$store.state.chatList.map(item => ({
			            ...item,
			            showTooltip: false // 新增属性，用于跟踪tooltip的显示状态
			        }));
					this.nowChageDom = 'kong'
			    } catch (error) {
			        console.error('Error during delete operations:', error);
			    }
			},
			allclick() {
				this.$set(this.chatList[this.nowChageDom], 'showTooltip', false);
				this.nowChageDom = 'kong'

			},
			delchat(index) {
				if (this.nowChageDom !== 'kong') {
					this.$set(this.chatList[this.nowChageDom], 'showTooltip', false);
					this.nowChageDom = index
					this.$set(this.chatList[index], 'showTooltip', true);
				} else {
					this.nowChageDom = index
					this.$set(this.chatList[index], 'showTooltip', true);
				}

			},
			gochat(item) {
				if (this.nowChageDom == 'kong') {
					// 更新Vuex store中的chatItem
					this.$store.dispatch('updateChatItem', item);
					uni.navigateTo({
						url: `/pages/message/components/chatpage?sourceIsInfo=0` // 注意路径格式  
					});
				} else {
					this.$set(this.chatList[this.nowChageDom], 'showTooltip', false);
					this.nowChageDom = 'kong'

				}
			},
			cunchuwenjian() {
				console.log("点击")

			},
			gotoaddfs() {
				uni.navigateTo({
					url: '/pages/message/components/newfslist?companyOrgId=${e.articleid}' // 注意路径格式  
				});
			},
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight + 10;
					}
				});
			},
		}
	}
</script>
<style lang="less" scoped>
	.messagecon:active {
		background-color: #ededed;
		/* 按下时的背景颜色 */
	}

	.mesageconbox {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.messagecon {
		position: relative;
		box-sizing: border-box;
		transition: background-color 0.3s ease;
		/* 平滑过渡效果 */
		// background-color: #ededed;
		width: 100%;
		display: flex;
		padding: 11px 11px 0px 11px;
.angle{
				z-index: 999;
				text-align: center;
				line-height: 12px;
				width: 13px;
				height: 13px;
				border-radius: 50%;
				color: #FFFFFF;
				font-size: 10px;
				background-color: #e5071f;
				position: absolute;
				top: 0px;
				right: 0px;
			}
		.avatarcon {
			position: relative;
			border-radius: 10px;
			// overflow: hidden;
			width: 60px;
			height: 50px;
			
			image {
				width: 50px;
				height: 50px;
			}
		}

		.messinfo {
			padding-right: 15px;
			overflow: hidden;
			padding-bottom: 9px;
			height: 50px;
			margin-bottom: 10px;
			margin-left: 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 100%;
			border-bottom: 1px solid #efefef;
			;

			.name {
				white-space: nowrap;
				/* 超出的空白区域不换行 */
				overflow: hidden;
				/* 超出隐藏 */
				text-overflow: ellipsis;
				/* 文本超出显示省略号 */
				font-size: 16px;
				font-weight: 800;
				color: #000;
			}

			.endmessge {
				white-space: nowrap;
				/* 超出的空白区域不换行 */
				overflow: hidden;
				/* 超出隐藏 */
				text-overflow: ellipsis;
				/* 文本超出显示省略号 */
				font-size: 14px;
				color: #999999;
			}
		}

		.tooltip {
			transition: background-color 0.3s ease;
			/* 平滑过渡效果 */
			position: absolute;
			top: 50%;
			left: 50%;
			background-color: #939393;
			transform: translateX(50%);
			transform: translateY(-50%);
			color: #FFFFFF;
			width: 70px;
			height: 30px;
			font-size: 14px;
			text-align: center;
			line-height: 30px;
			border-radius: 6px;
		}

		.tooltip::after {
			content: "";
			display: block;
			width: 0;
			height: 0;
			border-left: 6px solid transparent;
			/* 左边透明 */
			border-right: 6px solid transparent;
			/* 右边透明 */
			border-top: 5px solid #939393;
			/* 底边颜色，形成三角形 */
			position: absolute;
			left: 50%;
			bottom: -4px;
			transform: translateX(-50%);
		}
	}

	.xujia {
		height: 3.3rem;
		background: #f2f2f4;
	}

	.title-topcon {
		position: fixed;
		width: 100%;
		padding: 1rem;
		font-size: 1.5rem;
		font-weight: 700;
		background: #f2f2f4;
	}

	.selectclick {
		padding: 0 1rem 1rem 1rem;
		background: #f2f2f4;

		.selectbox {
			padding: 1rem 1.5rem 1rem 1.5rem;
			border-radius: 0.8rem;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;

			.selectbox-that {
				display: flex;
				flex-direction: column;
				align-items: center;

				.selecticon {
					height: 2.2rem;
					width: 2.2rem;

					.imgcon {
						height: 2.2rem;
						width: 2.2rem;

						img {
							height: 2.2rem;
							width: 2.2rem;
							object-fit: contain;
						}
					}

				}

				.tixin {
					height: 0.4rem;
					width: 0.4rem;
					border-radius: 50%;
					background-color: red;
					position: relative;
					right: -14%;
					top: 13%;
				}

				.selecttext {
					font-size: 0.7rem;
					margin-top: 0.3rem;
				}
			}
		}
	}

	.message-con {
		min-height: 100vh;
	}
</style>